<template>
  <PageMain :title="id ? '编辑' :'新增'">
    <div class="form-content f-c j-b">
      <div class="form-box">
        <el-form style="width: 660px" ref="formRef" :model="formData" :rules="rules" label-position="top" >
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="原料名称" prop="name">
               <el-input clearable v-model="formData.name"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="原料价格" prop="price">
               <el-input type="number"  :min="0" v-model="formData.price">
                 <template #append>
                 <el-select slot="append" v-model="formData.unit"  placeholder="请选择">
                   <el-option label="元/克" value="1"></el-option>
                   <el-option label="元/千克" value="2"></el-option>
                   <el-option label="元/吨" value="3"></el-option>
                 </el-select>
                 </template>
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="基于该原料生产的产品" prop="purpose">
               <el-input clearable  v-model="formData.purpose"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="产地" prop="producing">
               <el-input clearable  v-model="formData.producing"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="龙头企业" prop="leadingEnterprise">
               <el-input clearable  v-model="formData.leadingEnterprise"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="原料详细信息" prop="details">
               <el-input clearable type="textarea" :rows="5"  v-model="formData.details"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="图片" style="width: 100%" prop="image">
               <UploadImage v-model:image="formData.image" v-model:image-url="formData.imageUrl"/>

             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="推荐" prop="recommend">
              <el-switch :active-value="0" :inactive-value="1" v-model="formData.recommend"/>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="历史价格">
               <el-row class="row-data" :gutter="20" v-for="(item,index) in formData.oldPrice">
                 <el-col :span="10">
                   <el-date-picker clearable  v-model="item.historicalTime"/>
                 </el-col>
                 <el-col :span="10">
                   <el-input type="number" :min="0" v-model="item.price">
                     <template #append>
                       <el-select slot="append" v-model="item.unit"  placeholder="请选择">
                         <el-option label="元/克" value="1"></el-option>
                         <el-option label="元/千克" value="2"></el-option>
                         <el-option label="元/吨" value="3"></el-option>
                       </el-select>
                     </template>
                   </el-input>
                 </el-col>
                 <el-col :span="4">
                    <el-button type="text"  @click="formData.oldPrice.splice(index,1)">删除</el-button>
                 </el-col>
               </el-row>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-button type="text" @click="addHistory">添加历史价格</el-button>
           </el-col>
         </el-row>
        </el-form>
      </div>
      <div class="form-button f-s">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </PageMain>
</template>
<script setup>
import {ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import {http, httpUpload} from "@/api";
const apiKey = 'materialInfo'
const router = useRouter()
const route = useRoute()
const id = route.params.id
const formData = ref({
  "details": "",
  "name": "",
  "oldPrice": [
    {
      "historicalTime": "",
      "price": 0
    }
  ],
  image: '',
  imageUrl: '',
  recommend: 0,
  "price": 0,
  unit: '',
  "purpose": "",
  leadingEnterprise: '',
  producing: ''
})
const rules = ref({
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  price: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  purpose: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
})
const formRef =  ref(null)
if (id) {
  // 获取详情
  http[apiKey].read({
    id
  }).then(res => {
    for (const valueKey in formData.value) {
      formData.value[valueKey] = res.data[valueKey]
    }
    formData.value.id = id
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service()
      if (id) {
        // 编辑
        http[apiKey].update({
          ...formData.value,
          id
        }).then(res => {
          console.log(res)
          if (res.code === 0) {
            ElMessage.success('编辑成功')
            router.back()
          }
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        // 新增
        http[apiKey].create(formData.value).then(res => {
          console.log(res)
          if (res.code === 0) {
            ElMessage.success('新增成功')
            router.back()
          }
        }).finally(() => {
          loadingInstance.close()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
const addHistory = () => {
  formData.value.oldPrice.push( {
    "historicalTime": "",
    "price": 0
  })
}
</script>
<style lang="scss">
.form-box {
  display: flex;
  .el-input-group__append, .el-input-group__prepend {
    padding: 0 !important;
  }
  .gap {
    width: 32px;
  }
  .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
  }
}
</style>
